<template>
	<view class="yxyl-album-bottom-container">		
		<!-- #ifdef MP-WEIXIN -->
		<button open-type="share" class="yxyl-album-bottom-item share">分享</button>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="yxyl-album-bottom-item share" @tap="h5Share">分享</view>
		<!-- #endif -->
		<view class="yxyl-album-bottom-item goToDiscuss" v-if="canDiscuss" @tap="goToDiscuss">评论</view>
		<!-- H5分享提示 -->
		<!-- #ifdef H5 -->
		<yxylH5Share ref="h5Share"></yxylH5Share>
		<!-- #endif -->
		<!-- H5分享提示 -->
	</view>
</template>

<script>
// #ifdef H5
import yxylH5Share from '@/components/yxyl-h5-share/yxyl-h5-share.vue';
// #endif
export default{
	components:{
	// #ifdef H5
	yxylH5Share
	// #endif
	},
	props:{
		discussGroupId:{
			type:String,
			default() {
				return '';
			}
		},
		labelId:{
			type:String,
			default(){
				return '';
			}
		},
		canDiscuss:{
			type:Boolean,
			default:false
		}
	},
	computed:{
		showDiscuss(){
			return this.discussGroupId||this.labelId;
		}
	},
	methods:{
		// #ifdef H5
		h5Share:function()  {
			this.$refs.h5Share.openShare();
		},
		//#endif
		goToDiscuss:function(){			
			uni.navigateTo({
				url:'../../pages/discussGroup/discuss/discuss?discussGroupId='+this.discussGroupId+'&labelId='+this.labelId
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.yxyl-album-bottom-container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	.yxyl-album-bottom-item {
		flex-grow: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		&.share {
			background: $uni-color-main-dark;
			border-radius: 0;
		}
		&.goToDiscuss {
			background: rgb(236, 90, 22);
			border-radius: 0;
		}
	}
}
</style>
